<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <!-- 双大括号表达式 （Mustache语法） 其中可以填表达式 变量 不能填语句-->
        <h1>{{msg}}</h1>
        <h2>{{hobby}}</h2>
        <h2>{{sex}}</h2>
        <h2>{{age+1}}</h2>
        <h2>{{name.toUpperCase()}}</h2>
    </div>
    <div id="box2">
        <h1>{{name}}年龄{{age}}</h1>
    </div>
    <!-- <script src="../js/vue.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script>
        // vm1是Vue的实例对象
        let vm1 =new Vue({//配置对象
            el:'.box',//在.box盒子内部使用vue语法
            data:{//data对象中的所有属性都加入到vue响应式系统中,这些值一改变，视图也会发生改变，你想改动页面时，只更改数据即可
                msg:'土土很帅！！',
                hobby:'洋妞',
                sex:'',
                age:10,
                name:'tom'
            }
        })

        let data = {
                name:'硕硕',
                age:18
            }
        //阻断数据响应 
        // Object.freeze(data);    
        let vm2 = new Vue({
            el:'#box2',
            data
        })
        // 一个页面可以有多个vue实例对象
        console.log(vm1);
        console.log(vm1.msg == vm1._data.msg);//true
        console.log(vm1._data.msg==vm1.$data.msg);//true
        console.log(vm1.msg ==vm1._data.msg==vm1.$data.msg);//false  true == vm1.$data.msg
        
        /* 
        data中的数据必须有初始值：
        str:'' 
        num:0
        bealoon:false/true
        arr:[]
        obj:{}
        err:null
        
        使用变量，但是没有初始值就会报错
        
        */
       console.log(vm1.$el);
       console.log(vm2.$el);
        /* 
        语句：
        eg: let a= 123;
        表达式：
        true?yes:no
        a +1
        a++ ++a
        a-- --a
        'aaa'.toUpperCase()
        
        
        
        */
    </script>
</body>
</html>